<template>
    <div class="home">
        <div class="top">
            <p>检定登记</p>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>资产管理</el-breadcrumb-item>
                <el-breadcrumb-item>设备检定</el-breadcrumb-item>
                <el-breadcrumb-item>检定申请</el-breadcrumb-item>
             </el-breadcrumb>
        </div>

        <div class="header">
            <!-- 搜索 -->
                <el-input clearable style="width:150px" v-model="orderId" placeholder="申请单号"></el-input>
                <el-input clearable style="width:150px" v-model="applyPersonName" placeholder="申请人员"></el-input>
                <el-date-picker clearable v-model="startTime" align="right" type="date" placeholder="开始日期">
                </el-date-picker>
                <el-date-picker clearable v-model="endTime" align="right" type="date" placeholder="结束日期">
                </el-date-picker>
                <el-button @click="onSearch" style="background-color:#0bb197" type="success" icon="el-icon-search">查询</el-button>
                <el-button class="reset" @click="onReset" icon="el-icon-refresh">重置</el-button>
            </div>
            <!-- 数据 -->
        <div class="body">
            <div class="div">
            <h4>查询结果列表</h4>
                <el-button style="background-color:#0bb197" type="primary" @click="addDialog = true">新增</el-button>
            </div>
             <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column align="center" prop="id" label="序号" ></el-table-column>
                <el-table-column align="center" prop="orderId" label="申请单号" width="180"></el-table-column>
                <el-table-column align="center" prop="deptName" label="申请部门"></el-table-column>
                <el-table-column align="center" prop="applyPersonName" label="申请人员"></el-table-column>
                <el-table-column align="center" prop="applyTime" label="申请时间" width="200">
                    <template slot-scope="scope"><span>{{timeTrans(scope.row.applyTime)}}</span></template>
                </el-table-column>
                <el-table-column align="center" prop="checkUint" label="检定单位"></el-table-column>
                <el-table-column align="center" prop="checkWay" label="检定方式"></el-table-column>
                <el-table-column align="center" prop="checkEq" label="检定设备" width="150"></el-table-column>
                <el-table-column align="center" prop="realCheckTime" label="实际检定日期"  width="150">
                    <template slot-scope="scope"><span>{{timeTrans(scope.row.realCheckTime,1)}}</span></template>
                </el-table-column>
                <el-table-column align="center" prop="checkStatus" label="检定状态"  width="150">
                    <template slot-scope="scope">
                            <span>{{ scope.row.checkStatus == 0 ? "待检定" : "已完成" }}</span>
                        </template>
                </el-table-column>
                <el-table-column align="center" prop="operation" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button style="color:#0bb197" type="text" size="small" @click="query(scope.row)">详情</el-button>
                        <el-button v-if="scope.row.checkStatus == 0" @click="openCheck(scope.row)" style="color:#0bb197" type="text" size="small">检定登记</el-button>
                        <span v-else></span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="count"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :background="true"
                class="msg-pagination-container"
            >
            </el-pagination>
            <!-- 新增 -->
            <el-dialog title="新增登记" :visible.sync="addDialog">
                <el-form :model="addData">
                  <div class="addB">
                    <el-form-item label="申请单号" >
                      <el-input
                        v-model="addData.orderId"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="申请部门" >
                      <el-input
                          v-model="addData.deptName"
                          autocomplete="off"
                        ></el-input>
                      </el-form-item>
                  </div>
                  <div class="addB">
                      <el-form-item label="申请人员" >
                      <el-input v-model="addData.applyPersonName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="期望检定日期" >
                        <el-date-picker style="width:350px" v-model="addData.expectCheckTime" type="date" placeholder="选择日期"></el-date-picker>
                      </el-form-item>
                  </div>
                  <div class="addB">
                      <el-form-item label="检定单位" >
                        <el-input
                          v-model="addData.checkUint"
                          autocomplete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="检定方式" >
                      <el-input
                        v-model="addData.checkWay"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                  <div class="addB">
                    <el-form-item label="检定周期" >
                      <el-input
                        v-model="addData.checkCycle"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="上次检定日期" >
                      <el-date-picker style="width:350px" v-model="addData.lastCheckTime" type="date" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                  </div>
                  <div class="addB">
                    <!-- <el-form-item label="检定结果" >
                      <el-input
                        v-model="addData.checkStatus"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item> -->
                    <el-form-item label="检定费用" >
                      <el-input
                        v-model="addData.fee"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="实际检定日期" >
                      <el-date-picker style="width:350px" v-model="addData.realCheckTime" type="date" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                  </div>
                  <!-- <div class="addB">
                  </div> -->
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button class="button" @click="addDialog = false">取 消</el-button>
                  <el-button type="primary" @click="add" style="background-color:#0bb197;border:1px solid #0bb197;">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 详情 -->
            <el-dialog title="详情信息" :visible.sync="queryDialog" style="color:0bb197">
              <div class="queryDetails">
                <p>申请单号：{{row.orderId}}</p>
                <p>申请部门：{{row.deptName}}</p>
              </div>
              <div class="queryDetails">
                <p>申请人员：{{row.applyPersonName}}</p>
                <p>期望检定日期：{{row.expectCheckTime}}</p>
              </div>
              <div class="queryDetails">
                <p>检定单位：{{row.checkUint}}</p>
                <p>检定方式：{{row.checkWay}}</p>
              </div>
              <div class="queryDetails">
                <p>检定周期：{{row.checkCycle}}</p>
                <p>上次检定日期：{{row.lastCheckTime}}</p>
              </div>
              <div class="queryDetails">
                <p>检定结果：{{row.checkStatus==0?"待检定":"已完成"}}</p>
                <p>检定费用：{{row.fee}}</p>
              </div>
              <div class="queryDetails">
                <p>实际检定日期：{{row.realCheckTime}}</p>
              </div>
              <div style="margin-left:15px">
                <p class="startDate" style="margin:15px 0">设备列表:</p>
                  <el-table :data="deviceName" stripe style="width: 100%">
                      <el-table-column prop="id" label="序号"></el-table-column>
                      <el-table-column prop="equipmentCoding" label="设备编码"></el-table-column>
                      <el-table-column prop="deviceName" label="设备名称"></el-table-column>
                      <el-table-column prop="equipmentModel" label="设备型号"></el-table-column>
                      <el-table-column prop="manufacturers" label="厂家名称"></el-table-column>
                      <el-table-column align="center" prop="purchaseDate" label="购入时间" width="150">
                      <template slot-scope="scope"><span>{{timeTrans(scope.row.purchaseDate,1)}}</span></template>
                  </el-table-column>
              </el-table>
        </div>
            </el-dialog>
            <!-- 检定登记 -->
            <el-dialog title="检定登记" :visible.sync="checkDialog">
                <el-form :model="checkData">
                  <div class="addB">
                    <el-form-item label="检定结果" >
                      <!-- <el-input
                        v-model="checkData.checkStatus"
                        autocomplete="off"
                      >
                       <template slot-scope="scope">
                       <span>{{scope.checkData.checkStatus==0 ? '待检定':'已完成'}}</span> 
                       </template>
                      </el-input> -->
                      <el-select v-model="checkStatus" placeholder="请选择" style="width:350px">
                      <el-option 
                        v-for="item in options"
                        :key="item.checkStatus"
                        :label="item.label"
                        :value="item.checkStatus">
                      </el-option>
                    </el-select>
                    </el-form-item>
                    
                    <el-form-item label="检定费用（元）" >
                      <el-input
                        v-model="checkData.fee"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                  <div class="addB">
                    <el-form-item label="实际检定日期" >
                      <el-date-picker style="width:350px" v-model="checkData.realCheckTime" type="date" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="备注说明" >
                      <el-input
                        v-model="checkData.reason"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </div>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button class="button" @click="checkDialog = false">取 消</el-button>
                  <el-button type="primary" @click="check" style="background-color:#0bb197;border:1px solid #0bb197;">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import time from "../utils/time"
export default {
    mixins:[time],
    data:function(){
        return {
            orderId:"",
            applyPersonName:"",
            startTime:'',
            endTime:'',
            tableData:[],
            total:1,
            count:5,
            page:1,
            addDialog: false,
            addData: {
                orderId: "",
                deptName: "",
                applyPersonName: "",
                expectCheckTime: "",
                checkUint:'',
                checkWay: "",
                checkCycle: "",
                lastCheckTime:"",
                realCheckTime:"",
                checkStatus:0,
                fee:"",
            },
            row:"",
            queryDialog:false,
            deviceName:[],
            checkDialog:false,
            checkData:{},
            options:[{
              checkStatus:0,
              label:'待检定'
            },{
              checkStatus:1,
              label:'已完成'
            }],
            checkStatus:''
        }
    },
    methods:{
         //分页
        handleSizeChange(val){
            this.count = val;
            this.getData();
            },
            handleCurrentChange(val){
            this.page = val;
            this.getData();
        },
        //渲染数据
        getData: function () {
            this.$axios({
                url: "/smart/check-records/list",
                method:'get',
                params: {
                    pageNum: this.page,
                    pageSize: this.count,
                    applyId:this.orderId,
                    applyPerson:this.applyPersonName,
                    startTime:this.startTime,
                    endTime:this.endTime
                },
            }).then(({ data }) => {
                console.log(data.data);
                if (data.code == 2000) {
                // console.log(data.data);
                this.tableData = data.data.list;
                this.total = data.data.total;
                } else {
                this.$message.error("数据加载失败！");
                }
            });
        },
        //查询
        onSearch: function () {
            console.log(111);
            this.getData();
        },
        //重置
        onReset:function(){
            this.orderId='',
            this.applyPersonName='';
            this.startTime='',
            this.endTime=''
            this.getData();
        },
        //新增
        add: function () {
        this.$axios({
            url: "/smart/check-records/add",
            method: "post",
            data: this.addData,
        }).then(({ data }) => {
            if ((data.code = 2000)) {
            console.log(data);
            this.$message.success("添加成功");
            this.addDialog = false;
            this.getData();
            } else {
            console.log(data);
            this.$message.error("添加失败");
            }
        });
        },
        //详情
        query:function(row){
          this.row = row;
          console.log(this.row);
          this.queryDialog = true;
          this.$axios({
            url:"/smart/equipment/queryById/"+row.id
          }).then(({data})=>{
            console.log("222",data);
            if(data.code == 2000){
              this.deviceName = [data.data];
              this.row.expectCheckTime = this.timeTrans(this.row.expectCheckTime,1);
              this.row.lastCheckTime = this.timeTrans(this.row.lastCheckTime,1);
              this.row.realCheckTime = this.timeTrans(this.row.realCheckTime,1);
              // console.log(typeof this.detailsData.purchaseDate);
              this.getData();
            }
          })
        },
        //检定登记
        openCheck:function(row){
          this.checkDialog=true;
          let checkData={...row}
          this.checkData=checkData;
          if(this.checkData.checkStatus==0){
            this.checkData.checkStatus=1;
          }
        },
        check:function(){
          // console.log(111);
          this.$axios({
            url:"/smart/check-records/edit",
            method:"PUT",
            data:this.checkData,
          }).then(({data})=>{
            if(data.code==2000){
              this.$message.success("检定完毕");
              this.checkDialog = false;
              this.getData();
            }else{
              this.$message.error("检定失败")
            }
          })
        }
    },
    mounted:function(){
        this.getData();
    }
}
</script>

<style scoped>
.home{
    height: 95%;
}
.top{
    display: flex;
    justify-content: space-between;
    margin: 20px 20px 10px 25px;
}
.header{
    height: 60px;
    background: white;
    margin: 10px 20px 20px;
    padding-top: 18px;
    padding-left: 15px;
    border-radius: 8px;
}
.reset{
    color:rgb(197, 196, 196);
}
.reset:hover{
    color: #0bb197;
}
.el-select{
    width: 180px;
    margin-right: 10px;
}
.el-button{
    margin-left: 10px;
}
.body{
    background: white;
    margin: 10px 20px;
    height: 84%;
    border-radius: 8px;
}
.el-pagination{
    margin: 25px 10px 0 0;
    display: flex;
    justify-content: right;
}
.div {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.el-form-item{
  width: 350px;
}
.addB{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.dialog-footer{
  display: flex;
  justify-content: center;
}
.el-input{
  margin-right: 10px;
}
.button:hover{
  color: #0bb197;
  border: 1px solid #0bb197;
}
</style>
<style>
  .msg-pagination-container.is-background .el-pager li:not(.disabled).active {
    /*当前选中页数的样式进行修改*/
    background-color: #0bb197;
    color: #FFF;
  }
  .queryDetails{
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0 15px;
}
.queryDetails p{
  width: 50%;
}
</style>